<!doctype html>
<html lang="en" data-bs-theme="auto">
{% load static %}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>知了课堂-账号激活</title>
    <link href="{% static 'bootstrap5/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'jquery/jquery-3.7.1.min.js' %}"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        .form-signin {
            max-width: 330px;
            padding: 1rem;
        }

        .form-signin .form-floating:focus-within {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    </style>
</head>

<body class="mt-5 bg-body-tertiary">
<main class="form-signin w-100 m-auto">
    <form method="POST">
        <h1 class="h3 mb-3 fw-normal">知了课堂-员工激活</h1>
        <div class="form-floating">
            <input name="email" type="email" class="form-control" id="floatingInput" placeholder="请输入邮箱">
            <label for="floatingInput">邮箱</label>
        </div>
        <div class="form-floating">
            <input name="password" type="password" class="form-control" id="floatingPassword" placeholder="请输入密码">
            <label for="floatingPassword">密码</label>
        </div>
        <button class="btn btn-primary w-100 py-2" type="submit" id="submit-btn">激活</button>
    </form>
</main>
<script>
    $('#submit-btn').on('click', function (e) {
        e.preventDefault()
        let email = $('#floatingInput').val()
        let password = $('#floatingPassword').val()
        let emailRegex =  /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
        console.log(email)
        if (!emailRegex.test(email)) {
            alert('邮箱格式不正确')
            return;
        }
        if (password.length < 6) {
            alert('密码长度不能小于6位')
        }
        $.post("/staff/active", {email, password}, function (result) {
            if (result.code === 200) {
                alert(result.message)
                window.location = '/'
            } else {
                alert(result.message)
            }
        })
    })
</script>
</body>

</html>